<template>
	<div>
		<el-form ref="form" :model="form" label-width="50px" style="width:320px;" :rules="roles">
			<el-form-item label="名称" prop="name">
				<el-input v-model="form.name"></el-input>
			</el-form-item>
			<el-form-item label="编码">
				<el-input v-model="form.code"></el-input>
			</el-form-item>
			<el-form-item label="排序">
				<el-input v-model="form.sort"></el-input>
			</el-form-item>
			<el-form-item label="Url" prop="url">
				<el-input v-model="form.url"></el-input>
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="form.remark"></el-input>
			</el-form-item>
			<el-form-item style="margin-top: 30px">
				<el-button style="width:120px" type="primary" @click="OnSubmit">保存</el-button>
				<el-button style="width:120px" @click="cacel">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				form: {

				},
				roles: {
					name: [{
						required: true,
						message: "请输入菜单名称",
						trigger: 'change'
					}],
					url: [{
						required: true,
						message: "请输入url",
						trigger: 'change'
					}]
				},
			};
		},
		props: ["btnType", 'parentId', 'level', 'editData'],
		mounted() {
			if(this.btyType == 3) {
				this.form = this.editData;
			}
			if(this.btyType == 1) {
				this.parentId = null;
				this.level = 1;
			}
			this.form = {};

			//this.$emit("Refresh","地图");
		},
		methods: {
			cacel() {
				this.$parent.$parent._data.DiallogVisible = false
			},
			Hiden() {
				this.$emit("Show", false);
			},
			OnSubmit: function() {
				this.$refs['form'].validate((valid) => {
					if(valid) {
						if(this.form.level == undefined) {
							this.form.level = this.level;
						}
						if(this.btnType == 2) {
							this.form.pid = this.parentId;
							this.form.hasChild = 0;
						}
						if(this.btnType == 1) {
							this.form.pid = 0;
							this.form.hasChild = 0;
						}
						this.form.isDelete = 1;
						let apiAction = this.btnType < 3 ? "addMenu" : "editMenu";
						console.log(this.form)
						this.ajax({
							url: 'tSysMenu/' + apiAction,
							type: 'post',
							data: this.form,
							success: function(data) {
								this.resetForm();
								this.$emit("Refresh");
							}

						});
					} else {
						return false;
					}
				})

			},
			resetForm() {
				this.form = {
					name: "",
					code: "",
					sort: "",
					utl: "",
					remark: ''
				};
			}
		},
		watch: {
			editData: function(newVal) {
				this.form = newVal;
			},
			parentId: function(newVal) {
				this.form.parentId = newVal;
			},
			level: function(newVal) {
				this.form.level = newVal;
			}
		}

	}
</script>
<style>
	.el-dialog__body {
		padding-bottom: 0px;
	}
</style>